<template>
  <h4>{{ title }}</h4>
  <canvas :id="key" class="c2d" width="1000" height="500"></canvas>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const key = ref("c2d" + Math.floor(Math.random() * 10000));
const props = defineProps({
  title: String,
});

onMounted(() => {
  const canvas = document.querySelector(`#${key.value}`);
  // 渲染器
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

  const fov = 40; // 视野范围
  const aspect = 2; // 相机默认值 画布的宽高比
  const near = 0.1; // 近平面
  const far = 1000; // 远平面
  // 透视投影相机
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  // 设置相机 x、y、z 位置
  camera.position.set(0, 0, 50);
  camera.up.set(0, 0, 1);
  // 相机指向的场景中心
  camera.lookAt(0, 0, 0);
  // 控制相机
  const controls = new OrbitControls(camera, canvas);
  controls.update();

  // 纹理加载器
  const loader = new THREE.TextureLoader();
  // 创建场景
  const scene = new THREE.Scene();
  const bgTexture = loader.load("/src/assets/img/4.jpg");
  scene.background = bgTexture;

  {
    const color = 0xffffff;
    const intensity = 1;
    // 创建光源
    const light = new THREE.PointLight(color, intensity);
    // 光源 加入场景
    scene.add(light);
  }

  // 物体网格对象
  const objects = [];
  {
    // 一球多用
    const radius = 2;
    const widthSegments = 36;
    const heightSegments = 36;
    const sphereGeometry = new THREE.SphereGeometry(
      radius,
      widthSegments,
      heightSegments
    );

    // 太阳
    const sunTexture = loader.load("/src/assets/img/1.jpg");
    const sunMaterial = new THREE.MeshBasicMaterial({ map: sunTexture });
    const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
    // 放大5倍
    sunMesh.scale.set(3, 3, 3);
    // scene.add(sunMesh)
    // 放入控制对象
    objects.push(sunMesh);

    // 地球
    const earthTexture = loader.load("/src/assets/img/3.jpg");
    const earthMaterial = new THREE.MeshPhongMaterial({
      map: earthTexture,
    });
    const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
    // earthMesh.position.x = 20
    // scene.add(earthMesh)
    // 放入控制对象
    objects.push(earthMesh);

    // 太阳系 物体对象
    const solarSystem = new THREE.Object3D();
    scene.add(solarSystem);
    objects.push(solarSystem);

    solarSystem.add(sunMesh);
    // solarSystem.add(earthMesh)

    // 地月系 物体对象
    const landOrbit = new THREE.Object3D();
    landOrbit.position.x = 20;
    solarSystem.add(landOrbit);
    objects.push(landOrbit);

    // 月球
    const moonTexture = loader.load("/src/assets/img/2.jpg");
    const moonMaterial = new THREE.MeshPhongMaterial({ map: moonTexture });
    const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial);
    moonMesh.scale.set(0.5, 0.5, 0.5);
    moonMesh.position.x = 5;
    objects.push(moonMesh);

    // 加入地月系
    landOrbit.add(earthMesh);
    landOrbit.add(moonMesh);
  }

  function render(time) {
    time *= 0.001;

    // 网格对象 旋转
    objects.forEach((obj) => {
      obj.rotation.y = time;
    });

    // 加载渲染器
    renderer.render(scene, camera);

    // 开始动画
    requestAnimationFrame(render);
  }

  // 开始渲染
  requestAnimationFrame(render);
});
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
